<template>
	<view class="personal">
		    <view @click="click" class="iconfont iconfanhui icon-fanhui"></view>
			<personal-info :pages="pages"></personal-info>
			<view class="option-box">
				<view :class="['option',current==0?'style':'']" @click="current=0">
					作品
				</view>
				<view :class="['option',current==1?'style':'']" @click="current=1">
					动态
				</view>
				<view :class="['option',current==2?'style':'']" @click="current=2">
					喜欢
				</view>
			</view>
			<personal-list :personalList="myList" v-if="current==0"></personal-list>
			<follow-list :list="friendsList" v-if="current==1"></follow-list>
			<personal-list :personalList="loveList" v-if="current==2"></personal-list>
			<tab></tab>
		</view>
</template>

<script>
	import tab from '../../components/tab.vue'
	import personalInfo from '../../components/personalInfo.vue'
	import personalList from '../../components/personalList.vue'
	import followList from '../../components/followList.vue'
	export default {
		components: {
			tab,
			personalInfo,
			personalList,
			followList
		},
		data() {
			return {
				pages:"user",
				current: 0,
				friendsList: [{
					"id": 3,
					"src": "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",
					"author": "王二麻子",
					"title": "看我屠龙宝刀",
					"loveNumber": 123,
					"commentNumber": 222,
					"shareNumber": 333
				}, {
					"id": 4,
					"src": "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",
					"author": "张大炮",
					"title": "我就是爱情公寓最有种的男人",
					"loveNumber": 124,
					"commentNumber": 444,
					"shareNumber": 321
				}],
				myList: [{
					"id": 1,
					"src": "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",
					"author": "张三",
					"title": "我爱学习",
					"loveNumber": 123,
					"commentNumber": 222,
					"shareNumber": 333
				}, {
					"id": 2,
					"src": "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",
					"author": "李四",
					"title": "我爱学习",
					"loveNumber": 124,
					"commentNumber": 444,
					"shareNumber": 321
				}],
				loveList: [{
					"id": 1,
					"src": "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",
					"author": "张三",
					"title": "我爱学习",
					"loveNumber": 123,
					"commentNumber": 222,
					"shareNumber": 333
				}, {
					"id": 2,
					"src": "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400",
					"author": "李四",
					"title": "我爱学习",
					"loveNumber": 124,
					"commentNumber": 444,
					"shareNumber": 321
				}]
			}
		},
		methods: {
			click() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
		width: 100%;
	}

	.personal {
		height: 100%;
		width: 100%;
		background-color: #000000;
	}

	.option-box {
		width: 100%;
		height: 50px;
		line-height: 50px;
		margin-bottom: 10px;

		.option {
			width: 33%;
			color: #999999;
			float: left;
			text-align: center;
		}
	}

	.style {
		border-bottom: 2px solid #F0ad4e;
	}
	.icon-fanhui{
		z-index: 21;
		color: #FFFFFF;
		font-size: 17px;
		position: absolute;
		top:30px;
		left:10px;
	}
</style>
